const path=require('path')
const HTMLWebpackPlugin=require('html-webpack-plugin')
const {CleanWebpackPlugin} =require('clean-webpack-plugin')
const  MiniCssExtractPlugin=require('mini-css-extract-plugin')


module.exports={
    mode:'production',

    devtool:'inline-source-map',

   
    
    output:{
        filename:"[name]-[hash:8].js"
    },

    // resolve:{
    //     extensions:['.jsx','.js','mjs','json'],
    //     alias:{
    //         '@':path.resolve(__dirname,'../src')
    //     }
    // },

    module:{
        rules:[
            // {
            //     test:/\.m?jsx?$/,
            //     exclude:/node_modules/,
            //     use:{
            //         loader:'babel-loader',
            //         options:{
            //             presets:[],
            //             plugins:[
            //                 '@babel/plugin-transform-runtime'
            //             ]
            //         }
            //     }
            // },
            // {
            //     test:/\.css$/i,
            //     use:[MiniCssExtractPlugin.loader,'css-loader']
            // },
            {
                test:/\.(png|svg|jpg|jpeg|gif)$/i,
                type:'asset/resource',
                generator:{
                    filename:'img/[hash][ext][query]'
                }
            }
        ]
    },


    // devServer:{
    //     contentBase:'./dist',
    //     port:8080,
    //     historyApiFallback:true,
    //     proxy:{
    //         '/api':{
    //             target:'http://localhost:9000',
    //             pathRewrite:{'^/api':''},
    //         }
    //     }
    // },
   
    plugins:[
        // new HTMLWebpackPlugin({
        //     template:'./public/index.html',
        //     filename:'index.html'
        // }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename:({chunk})=>`${chunk.name.replace('js/','css/')}-[hash:8].css`
        })
    ]
}